<template>
  <div class="login-container">
    <el-card class="box-card">
      <div class="logo-login">
        <img
          class="login-title-img"
          src="../../assets/login_img/loginTitle.png"
          alt=""
        >
        <div class="login-main">
          <el-form
            ref="loginForm"
            :model="loginForm"
            :rules="loginRules"
            class="login-form"
            auto-complete="on"
            label-position="left"
          >
            <el-form-item prop="username">
              <div class="input-login" style="display: flex; margin-top: 30px">
                <span class="svg-login_icon">
                  <img src="../../assets/login_img/mobile.png" alt="">
                </span>
                <el-input
                  ref="username"
                  v-model="loginForm.username"
                  style="width: 60%; background-color: #f8f5f5"
                  placeholder="请输入用户名"
                  name="username"
                  type="text"
                />
              </div>
            </el-form-item>

            <el-form-item prop="password">
              <div class="input-login" style="display: flex; margin-top: 40px">
                <span class="svg-login_icon">
                  <img src="../../assets/login_img/pwd.png" alt="">
                </span>
                <el-input
                  :key="passwordType"
                  ref="password"
                  v-model="loginForm.password"
                  style="width: 60%"
                  :type="passwordType"
                  placeholder="请输入密码"
                  name="password"
                  @keyup.enter.native="handleLogin"
                />
                <span class="show-pwd" style="transform:translate(-30px,5px)" @click="showPwd">
                  <svg-icon
                    :icon-class="
                      passwordType === 'password' ? 'eye' : 'eye-open'
                    "
                  />
                </span>
              </div>
            </el-form-item>
            <div class="input-login" style="margin-top:20px">
              <el-checkbox v-model="checked" style=" margin-bottom: 20px;">记住密码</el-checkbox><tr />
              <el-button
                :loading="loading"
                type="primary"
                style="width:75%;height: 50px;"
                @click.native.prevent="handleLogin"
              >登录</el-button>
            </div>

          </el-form>
        </div>
      </div>
      <div class="login-img" />
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false, // 记住密码
      loginForm: {
        username: 'admin',
        password: '111111'
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
        password: [{ required: true, trigger: 'blur', message: '请输入密码' }]
      },
      passwordType: 'password',
      loading: false
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (!valid) return
        this.$message.success('登入成功')
        this.$router.push('/')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.login-container {
  background-color: #fff;
  position: relative;
  height: 100%;
}
.login-main {
  margin-top: 20px;
}
.box-card {
  width: 958px;
  height: 516px;
  position: absolute;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 40px;
  ::v-deep .el-card__body {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    .logo-login {
      flex: 2;
      .login-title-img {
        display: block;
        margin: 0 auto;
        margin-top: 68px;
        width: 150px;
        height: 64px;

      }
    }
    .login-img {
      flex: 3;
      height: 100%;
      background: url("../../assets/login_img/img_right.png");
      background-size: cover;
    }
    .login-main {
      .svg-login_icon {
        position: relative;
        display: block;
        background-color: #eae7e7;
        width: 50px;
        height: 50px;
        img {
          position: absolute;
          display: block;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);

          width: 24px;
          height: 24px;
        }
      }
    }
  }
}
::v-deep .el-input__inner {
  background-color: #f8f5f5;
  height: 50px;
}
.input-login {
  margin-left: 70px;
}
</style>
